 
<!-- 详情 -->
<template>
  <div class="detail">
    <div class="detail_title df jc-sb w100 ai-c"><span></span>
      <h1>{{ '竞品评价详情' }}</h1><lay-button size="sm" @click="close">关闭</lay-button>
    </div>

    <div class="detail_content">
      <div v-if="dataKey.length>0">
        <lay-tab v-model="tabCurrent" @change="tab_change">
          <lay-tab-item :title="item" :id="item" v-for="(item, index) in dataKey" :key="index">
          </lay-tab-item>
        </lay-tab>

        <lay-scroll height="94%" style="" thumbColor="#f5f5f5">
          <lay-container>
            <table>
              <thead>
                <tr>
                  <th colspan="2">项目</th>
                  <th colspan="3">光泽</th>
                  <th colspan="3">香气</th>
                  <th colspan="3">协调</th>
                  <th colspan="3">杂气</th>
                  <th colspan="3">刺激性</th>
                  <th colspan="3">余味</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">样品编号</td>
                  <td rowspan="2">牌别</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td rowspan="2">合计</td>
                </tr>
                <tr>
                  <td>5</td>
                  <td>4</td>
                  <td>3</td>
                  <td>32</td>
                  <td>28</td>
                  <td>24</td>
                  <td>6</td>
                  <td>5</td>
                  <td>4</td>
                  <td>12</td>
                  <td>10</td>
                  <td>8</td>
                  <td>20</td>
                  <td>17</td>
                  <td>15</td>
                  <td>25</td>
                  <td>22</td>
                  <td>20</td>
                </tr>

                <template v-for="item in tableData" :key="item.id">
                  <tr v-if="item.number === '标样'">
                    <td>{{ item.number }}</td>
                    <td>{{ item.smokeModel }}</td>
                    <td colspan="3">{{ item.smokeGloss }}</td>
                    <td colspan="3">{{ item.smokeAroma }}</td>
                    <td colspan="3">{{ item.smokeHarmony }}</td>
                    <td colspan="3">{{ item.smokeImpure }}</td>
                    <td colspan="3">{{ item.smokeThrill }}</td>
                    <td colspan="3">{{ item.smokeAftertaste }}</td>
                    <td colspan="3">{{ item.smokeTotal }}</td>
                  </tr>
                </template>
                <template v-for="item in tableData" :key="item.id">
                  <tr v-if="item.number !== '标样'">
                    <td>{{ item.number }}</td>
                    <td>{{ item.smokeModel }}</td>
                    <td colspan="3">{{ item.smokeGloss }}</td>
                    <td colspan="3">{{ item.smokeAroma }}</td>
                    <td colspan="3">{{ item.smokeHarmony }}</td>
                    <td colspan="3">{{ item.smokeImpure }}</td>
                    <td colspan="3">{{ item.smokeThrill }}</td>
                    <td colspan="3">{{ item.smokeAftertaste }}</td>
                    <td colspan="3">{{ item.smokeTotal }}</td>
                  </tr>
                </template>
              </tbody>
            </table>

          </lay-container>
        </lay-scroll>

      </div>

      <!-- <lay-table :columns="columns7" :data-source="tableData" :span-method="spanMethod7"></lay-table> -->

      <div v-else>
        <lay-empty description="暂无数据"></lay-empty>
      </div>
    </div>

  </div>
</template>
      
      <script setup lang="ts">
import http from "@/http";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const id = ref(route.query.id);

const columns7 = [
  {
    title: "编号",
    width: "80px",
    key: "id",
  },
  {
    title: "名称",
    width: "100px",
    key: "name",
  },
  {
    title: "性别",
    width: "100px",
    key: "sex",
  },
  {
    title: "年龄",
    width: "100px",
    key: "age",
  },
  {
    title: "城市",
    width: "100px",
    key: "city",
  },
  {
    title: "签名",
    width: "240px",
    key: "remark",
  },
];

const spanMethod7 = (row, column, rowIndex, columnIndex) => {};

onMounted(() => {
  get_list();
});
// 选项卡绑定
const tabCurrent = ref(""); 
// 选项卡切换事件
const tab_change = (e) => {
  console.log(e);
  console.log(info.value);
  tableData.value = info.value[e];
};
const tableData = ref<any>([]);
const info = ref([]);
// key 值数组
const dataKey = ref<string[]>([]);
const get_list = async () => {
  const res = await http.corsApi(`/smokeMeeting/competitorsDetails/${id.value}`, "get", {});
  console.log(res);
  info.value = res.data;
  console.log(Object.keys(res.data)); 
  if (res.data) {
    dataKey.value = Object.keys(res.data);
    tabCurrent.value = dataKey.value[0];
    tableData.value = res.data[tabCurrent.value];
  }

  console.log(dataKey.value);
  console.log(tableData.value);
};

// 关闭
const close = () => {
  router.go(-1);
  //   router.push("/smokePanel/metting");
};
</script>
      
    <style scoped lang="scss">
.detail {
  width: 100%;
  height: calc(100% - 42px);
  display: flex;
  flex-direction: column;
  &_title {
    width: 100%;
    padding: 15px 15px 20px 0;
    box-sizing: border-box;
    background-color: #fff;
    h1 {
      font-size: 20px;
    }
  }
  &_content {
    width: 100%;
    height: calc(100% - 120px);
    > div {
      width: 90%;
      margin: 15px auto 0px;
      height: 100%;
      // background-color: #fff;
      table {
        width: 100%;
        text-align: center;
        background-color: #fff;
        th {
          padding: 8px;
          box-sizing: border-box;
          border: 1px solid #ccc;
        }
        tr {
          td {
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
          }
        }
      }
    }
  }
}

.layui-container {
  padding: 0;
}

.layui-tab {
  margin: 0;
  background-color: #fff;
  :deep(.layui-tab-content) {
    display: none;
  }

  :deep(.layui-tab-title) {
    height: 31px;
    .layui-this {
      background-color: #b8ddff;
    }
  }
  :deep(.layui-tab-title li) {
    line-height: 30px;
    padding: 0;
    border-bottom: 0 none;
  }
}
</style> 